<div
    {{on "keydown" this.onKeydown}}
    {{on "mousedown" this.onMouseDown}}
    class={{if this.isDropdownOpen "open"}}
>
    <input
        type="text"
        class="form-control"
        value={{this.value}}
        placeholder={{@content.placeholder}}
        {{on "input" this.onInput}}
        {{on "focus" this.onFocus}}
        {{on "blur" this.onBlur}}
        {{may-focus this true}}
    />
    <ul class="dropdown-menu" role="menu">
        {{#each this.searchResults as |result|}}
            <li class="{{if result.active "active"}}">
                <a {{action "selectResult" result}}>{{result.label}}</a>
            </li>
        {{else}}
            <li>
                <a>{{t 'component.oxifield_cert_identifier.no_matches'}}</a>
            </li>
        {{/each}}
    </ul>
</div>
